<template>
	<view>
		<view class="searchbox">
			<view class="search">
				<image class="search_img" :src="$IMG_URLT + 'ic_ss@2x.png'" ></image>
				<u-input @blur="handleBlur" @focus="onFocus" class="search_int" placeholder="请输入搜索内容" v-model="value" type="text" />
			</view>
			<view class="search_btn" @click="searchbtn">搜索</view>
		</view>
		<view class="history" v-if="showtype">
			<view class="title">
				历史记录
				<view class="title_rt" @tap="clearhistory">
					<image :src="$IMG_URLT + 'search_01.png'"></image>
					清空
				</view>
			</view>
			<view class="history_list">
				<view class="history_list_icon" v-for="item in historylist" @tap="changeicon(item.name)">{{item.name}}</view>
			</view>
		</view>
		<view class="list" v-else>
			<view class="content_box">
				<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
					<view class="list">
						<custom-waterfalls-flow ref="flowWorkList" seat="2" class="pubuliu" :value="goodsList" @wapperClick="openPreview" @imageClick="imageClick"
							v-if="goodsList.length>0">
							<view class="item" v-for="(item,index) in goodsList" :key="index" slot="slot{{index}}">
								<view class="title">{{item.title}}</view>
								<view class="icon">
									<view class="icon_list colorone">{{item.category_ids_arr}}</view>
									<!-- <view class="icon_list colortwo">{{item.name}}</view>
									<view class="icon_list2 colorthr"><image src="../../static/images/category_03.png"></image></view> -->
								</view>
								<view class="text">{{item.price}}</view>
								<!-- <view class="desc">{{item.desc}}</view> -->
							</view>
						</custom-waterfalls-flow>
					</view>
					
					<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
						tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>
					
					<u-loadmore v-show="isEmpty" height="80rpx" :status="loadStatus" icon-type="flower"
						color="#ccc" />
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				showtype:true,
				currentPage:1,
				goodsList:'',
				selectlist:'',
				selectlisttwo:'',
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				isEmpty:false,
				historylist:'',
			}
		},
		onLoad() {
			this.historylist= uni.getStorageSync('historylist')||[]
		},
		onReachBottom(){
			console.log(111111)
			if(!this.showtype){
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getGoodsList();
				}
			}
			
		},
		methods: {
			// 清空历史搜索记录
			clearhistory(){
				this.historylist=[]
				uni.removeStorageSync('historylist');
			},
			imageClick(item){
				this.openPreview('/pages/goods/detailtwo', { id:item.id })
			},
			// 点击列表跳转详情
			openPreview(path, parmas){
				console.log(1111)
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			handleBlur(){
				// this.showtype=false
			},
			onFocus(){
				this.showtype=true
			},
			changeicon(name){
				this.value=name
				this.currentPage=1
				this.goodsList=[]
				this.showtype=false
				this.getGoodsList()
			},
			// 搜索
			searchbtn(){
				if(this.value.length>0){
					this.currentPage=1
					this.goodsList=[]
					this.historylist.unshift({name:this.value})
					uni.setStorageSync('historylist', this.historylist);
					this.getGoodsList()
				}
				this.showtype=false
			},
			// 商品列表
			getGoodsList(){
				let that = this;
				that.$http('goods.lists', {
					keywords:that.value,
					page: that.currentPage
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.goodsList = [...that.goodsList, ...res.data.data];
						that.isEmpty = !that.goodsList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.searchbox{
	display: flex;
	align-items: center;
	width: 702rpx;
	height: 76rpx;
	margin:0 auto;
	margin-top:8rpx;
	.search{
		width: 590rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		.search_img{
			width: 36rpx;
			height: 36rpx;
			margin-left:24rpx;
		}
		.search_int{
			font-size: 28rpx;
			font-family: AlibabaPuHuiTiR;
			flex: 1;
		}
	}
	.search_btn{
		font-size: 28rpx;
		font-family: AlibabaPuHuiTiR;
		color: #FBB03B;
		margin-left:32rpx;
	}
}
.history{
	margin:0 24rpx;
	margin-top:48rpx;
	height:315rpx;
	overflow:hidden;
	.title{
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 500;
		color: #111111;
		.title_rt{
			margin-left:auto;
			display: flex;
			align-items: center;
			image{
				width: 32rpx;
				height: 32rpx;
			}
			font-size: 28rpx;
			font-weight: 300;
			color: #555555;
		}
	}
	.history_list{
		display: flex;
		flex-wrap: wrap;
		margin-top:32rpx;
		.history_list_icon{
			padding: 12rpx;
			font-size: 24rpx;
			color: #999999;
			border: 1rpx solid #999999;
			margin-right: 16rpx;
			margin-bottom: 24rpx;
		}
	}
}
.list{
	margin:0 24rpx;
	margin-top:24rpx;
	.pubuliu{
		.data-v-ddfcbb1c{
			border-radius: 15rpx;
		}
		image{
			width: 340rpx;
			border-radius: 15rpx;
		}
	}
	.title{
		width: 306rpx;
		font-size: 28rpx;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #111111;
		margin:0 16rpx;
		margin-top:20rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
	}
	.item{
		padding-bottom: 28rpx;
	}
	.icon{
		margin:0 16rpx;
		margin-top:20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.icon_list{
			height:42rpx;
			line-height: 42rpx;
			padding:0 12rpx;
			font-size: 22rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			margin-right:10rpx;
			border-radius: 8rpx;
		}
		.icon_list2{
			padding:6rpx 8rpx;
			display: flex;
			align-items: center;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		.colorone{
			color: #F69B0E;
			background: rgba(251,176,59,0.12);
		}
		.colortwo{
			color: #E60000;
			background: rgba(230,0,0,0.09);
		}
		.colorthr{
			color: #F69B0E;
			background: rgba(83,0,230,0.09);
		}
		
	}
	.text{
		margin:0 16rpx;
		margin-top:24rpx;
		font-size: 36rpx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #E60000;
		line-height: 36rpx;
		&:after{
			content: '积分';
			font-size: 24rpx;
		}
	}
}
</style>
